[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" export default function Home() { return (

Quantum Ethics

Explore ethical dilemmas through the lens of quantum principles

Make decisions that exist in a superposition of possibilities until you collapse the wave function.

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { Providers } from "@/components/providers" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Quantum Ethics", description: "A quantum-inspired ethical decision-making simulator", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 224 71% 4%; --foreground: 213 31% 91%; --primary: 222 47% 11%; --primary-foreground: 210 40% 98%; --secondary: 222 47% 11%; --secondary-foreground: 210 40% 98%; --muted: 223 47% 11%; --muted-foreground: 215 20% 65%; --accent: 216 34% 17%; --accent-foreground: 210 40% 98%; --destructive: 0 63% 31%; --destructive-foreground: 210 40% 98%; --border: 216 34% 17%; --input: 216 34% 17%; --ring: 213 31% 91%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } @layer utilities { .animate-spin-slow { animation: spin 15s linear infinite; } .animate-reverse-spin { animation: reverse-spin 20s linear infinite; } @keyframes reverse-spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } } [V0_FILE]typescriptreact:file="components/providers.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useState, useEffect } from "react" import type { DilemmaType, UserResponseType } from "@/lib/types" import { dilemmas } from "@/lib/data" type QuantumEthicsContextType = { dilemmas: DilemmaType[] userResponses: UserResponseType[] addResponse: (response: UserResponseType) => void getPrediction: (dilemmaId: string, choiceId: string) => number updatePredictionAccuracy: (dilemmaId: string, choiceId: string, accurate: boolean) => void } const QuantumEthicsContext = createContext(undefined) export function Providers({ children }: { children: React.ReactNode }) { const [userResponses, setUserResponses] = useState([]) const [predictions, setPredictions] = useState>>({}) // Load saved data from localStorage on client side useEffect(() => { const savedResponses = localStorage.getItem("quantum-ethics-responses") if (savedResponses) { setUserResponses(JSON.parse(savedResponses)) } const savedPredictions = localStorage.getItem("quantum-ethics-predictions") if (savedPredictions) { setPredictions(JSON.parse(savedPredictions)) } else { // Initialize predictions with equal probabilities const initialPredictions: Record> = {} dilemmas.forEach((dilemma) => { initialPredictions[dilemma.id] = {} const probability = 1 / dilemma.choices.length dilemma.choices.forEach((choice) => { initialPredictions[dilemma.id][choice.id] = probability }) }) setPredictions(initialPredictions) } }, []) // Save to localStorage when data changes useEffect(() => { if (userResponses.length > 0) { localStorage.setItem("quantum-ethics-responses", JSON.stringify(userResponses)) } localStorage.setItem("quantum-ethics-predictions", JSON.stringify(predictions)) }, [userResponses, predictions]) const addResponse = (response: UserResponseType) => { setUserResponses((prev) => [...prev, response]) // Update predictions based on this new response updatePredictions(response) } const updatePredictions = (response: UserResponseType) => { // Simple prediction algorithm that increases probability for similar choices setPredictions((prev) => { const newPredictions = { ...prev } // For each dilemma dilemmas.forEach((dilemma) => { if (!newPredictions[dilemma.id]) { newPredictions[dilemma.id] = {} } // For each choice in the dilemma dilemma.choices.forEach((choice) => { if (newPredictions[dilemma.id][choice.id] === undefined) { // Initialize with equal probability newPredictions[dilemma.id][choice.id] = 1 / dilemma.choices.length } // If this choice is similar to the one just made, increase its probability if (choice.category === response.choice.category) { newPredictions[dilemma.id][choice.id] = Math.min(newPredictions[dilemma.id][choice.id] + 0.1, 0.9) } }) // Normalize probabilities to sum to 1 const sum = Object.values(newPredictions[dilemma.id]).reduce((a, b) => a + b, 0) Object.keys(newPredictions[dilemma.id]).forEach((choiceId) => { newPredictions[dilemma.id][choiceId] /= sum }) }) return newPredictions }) } const getPrediction = (dilemmaId: string, choiceId: string): number => { if (!predictions[dilemmaId] || predictions[dilemmaId][choiceId] === undefined) { return 1 / dilemmas.find((d) => d.id === dilemmaId)?.choices.length || 0.25 } return predictions[dilemmaId][choiceId] } const updatePredictionAccuracy = (dilemmaId: string, choiceId: string, accurate: boolean) => { setPredictions((prev) => { const newPredictions = { ...prev } if (!newPredictions[dilemmaId]) { return newPredictions } // Adjust the prediction based on accuracy feedback const adjustment = accurate ? 0.05 : -0.05 Object.keys(newPredictions[dilemmaId]).forEach((cId) => { if (cId === choiceId) { newPredictions[dilemmaId][cId] = Math.min(Math.max(newPredictions[dilemmaId][cId] + adjustment, 0.1), 0.9) } else { // Adjust other choices in the opposite direction const smallAdjustment = -adjustment / (Object.keys(newPredictions[dilemmaId]).length - 1) newPredictions[dilemmaId][cId] = Math.min( Math.max(newPredictions[dilemmaId][cId] + smallAdjustment, 0.1), 0.9, ) } }) // Normalize probabilities const sum = Object.values(newPredictions[dilemmaId]).reduce((a, b) => a + b, 0) Object.keys(newPredictions[dilemmaId]).forEach((cId) => { newPredictions[dilemmaId][cId] /= sum }) return newPredictions }) } return ( {children} ) } export function useQuantumEthics() { const context = useContext(QuantumEthicsContext) if (context === undefined) { throw new Error("useQuantumEthics must be used within a QuantumEthicsProvider") } return context } [V0_FILE]typescriptreact:file="lib/types.ts" isMerged="true" export type ChoiceType = { id: string text: string description: string category: string consequences?: string } export type DilemmaType = { id: string title: string description: string context: string choices: ChoiceType[] } export type UserResponseType = { dilemmaId: string choice: ChoiceType timestamp: number } [V0_FILE]typescriptreact:file="lib/data.ts" isMerged="true" import type { DilemmaType } from "./types" export const dilemmas: DilemmaType[] = [ { id: "trolley-problem", title: "The Trolley Dilemma", description: "A runaway trolley is heading down the tracks toward five workers who will be killed if the trolley proceeds on its present course.", context: "You are standing next to a lever that controls a switch. If you pull the lever, the trolley will be redirected onto a side track where it will kill one person instead of five. What do you do?", choices: [ { id: "pull-lever", text: "Pull the lever", description: "Redirect the trolley to kill one person instead of five", category: "utilitarian", consequences: "One person dies instead of five, but you actively participated in causing that one death.", }, { id: "do-nothing", text: "Do nothing", description: "Allow the trolley to continue on its course", category: "deontological", consequences: "Five people die, but you didn't actively participate in causing any deaths.", }, { id: "warn-workers", text: "Try to warn the workers", description: "Shout to alert the workers of the danger", category: "virtue-ethics", consequences: "You might save some lives, but there's no guarantee all will hear you in time.", }, { id: "sacrifice-self", text: "Sacrifice yourself", description: "Jump in front of the trolley to try to stop it", category: "altruistic", consequences: "You likely die, but might save the five workers if your sacrifice stops or slows the trolley.", }, ], }, { id: "whistleblower", title: "The Whistleblower's Choice", description: "You've discovered your company is illegally dumping toxic waste into a river that supplies drinking water to a nearby town.", context: "You have evidence that could expose the company, but going public would likely cost you your job and possibly make you unhirable in your industry. What do you do?", choices: [ { id: "report-authorities", text: "Report to authorities", description: "Provide evidence to environmental regulators", category: "utilitarian", consequences: "The pollution might stop, but you'll likely lose your job and face potential retaliation.", }, { id: "confront-management", text: "Confront management", description: "Try to change the policy from within", category: "virtue-ethics", consequences: "You maintain your integrity by speaking up, but management might ignore you or even fire you while continuing the pollution.", }, { id: "anonymous-leak", text: "Leak anonymously", description: "Send evidence to journalists anonymously", category: "consequentialist", consequences: "The pollution might stop without direct consequences to you, but if your identity is discovered, you could face worse repercussions.", }, { id: "stay-silent", text: "Stay silent", description: "Keep your job and avoid conflict", category: "self-interest", consequences: "You maintain your livelihood, but the pollution continues and people's health is harmed.", }, ], }, { id: "autonomous-vehicle", title: "Autonomous Vehicle Decision", description: "You're programming an autonomous vehicle that must make a split-second decision in an unavoidable accident scenario.", context: "The car must choose between swerving left into an elderly couple, swerving right into a young child, or continuing straight and hitting a barrier which would likely kill the passenger (a 30-year-old). How should you program the car to respond?", choices: [ { id: "protect-passenger", text: "Protect the passenger", description: "Program the car to minimize harm to its occupant", category: "contractarian", consequences: "The passenger survives, but either the elderly couple or child is killed.", }, { id: "minimize-casualties", text: "Minimize casualties", description: "Program the car to minimize the total number of deaths", category: "utilitarian", consequences: "The decision is based purely on numbers, which might mean sacrificing the passenger to save multiple pedestrians.", }, { id: "protect-vulnerable", text: "Protect the most vulnerable", description: "Program the car to avoid hitting children and elderly", category: "care-ethics", consequences: "The most vulnerable are protected, but this might mean sacrificing the passenger more often.", }, { id: "random-decision", text: "Random decision", description: "Program the car to make a random choice in no-win scenarios", category: "procedural", consequences: "No one group is systematically disadvantaged, but the randomness might lead to suboptimal outcomes in specific cases.", }, ], }, { id: "medical-resources", title: "Medical Resource Allocation", description: "You're a doctor during a crisis with limited medical resources and must decide how to allocate a single ventilator.", context: "You have three patients who need the ventilator: a 75-year-old renowned scientist who might be close to a breakthrough, a 45-year-old nurse with three children, and a 20-year-old with a severe disability. Who receives the ventilator?", choices: [ { id: "scientist", text: "The scientist", description: "Allocate resources based on potential societal contribution", category: "utilitarian", consequences: "The scientist might make discoveries that save many lives, but the other two patients will likely die.", }, { id: "nurse", text: "The nurse", description: "Allocate resources based on family responsibilities", category: "care-ethics", consequences: "The nurse can continue caring for their children and patients, but the scientist and young person will likely die.", }, { id: "young-person", text: "The young person", description: "Allocate resources based on years of life remaining", category: "fair-opportunity", consequences: "The young person has the most potential years of life ahead, but the scientist and nurse will likely die.", }, { id: "lottery", text: "Random lottery", description: "Allocate resources through a random selection", category: "procedural-justice", consequences: "The process is fair in that no one is judged more worthy than others, but might not maximize lives saved or other values.", }, ], }, { id: "privacy-security", title: "Privacy vs. Security", description: "You're designing a national security system that could prevent terrorist attacks by monitoring private communications.", context: "The system would be highly effective at identifying threats, but would require scanning all citizens' private messages, calls, and emails. How would you implement this system?", choices: [ { id: "full-surveillance", text: "Implement full surveillance", description: "Monitor all communications to maximize security", category: "utilitarian", consequences: "Potential attacks are prevented, but everyone's privacy is compromised.", }, { id: "targeted-surveillance", text: "Implement targeted surveillance", description: "Only monitor communications of suspicious individuals", category: "balanced", consequences: "Some privacy is preserved, but some threats might be missed.", }, { id: "opt-in-system", text: "Create an opt-in system", description: "Allow citizens to choose whether to participate", category: "libertarian", consequences: "Individual freedom is preserved, but the system's effectiveness is significantly reduced.", }, { id: "reject-system", text: "Reject the surveillance system", description: "Prioritize privacy rights over additional security", category: "rights-based", consequences: "Privacy is fully protected, but preventable attacks might occur.", }, ], }, ] [V0_FILE]typescriptreact:file="app/dilemmas/page.tsx" isMerged="true" "use client" import Link from "next/link" import { useQuantumEthics } from "@/components/providers" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" export default function DilemmasPage() { const { dilemmas, userResponses } = useQuantumEthics() // Calculate which dilemmas have been completed const completedDilemmaIds = userResponses.map((response) => response.dilemmaId) return (

Ethical Dilemmas

Explore these quantum-inspired ethical scenarios

{dilemmas.map((dilemma) => { const isCompleted = completedDilemmaIds.includes(dilemma.id) return ( {dilemma.title} {dilemma.description}

{dilemma.context.substring(0, 120)}...

{isCompleted ? (

Completed

) : (

)} ) })}

) } [V0_FILE]typescriptreact:file="app/dilemmas/[id]/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { useQuantumEthics } from "@/components/providers" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import type { DilemmaType, ChoiceType } from "@/lib/types" import { SuperpositionVisualizer } from "@/components/superposition-visualizer" import { PredictionTunnel } from "@/components/prediction-tunnel" export default function DilemmaPage({ params }: { params: { id: string } }) { const router = useRouter() const { dilemmas, userResponses, addResponse, getPrediction } = useQuantumEthics() const [dilemma, setDilemma] = useState(null) const [selectedChoice, setSelectedChoice] = useState(null) const [isCollapsed, setIsCollapsed] = useState(false) const [showConsequences, setShowConsequences] = useState(false) const [previousResponse, setPreviousResponse] = useState(null) useEffect(() => { const foundDilemma = dilemmas.find((d) => d.id === params.id) if (foundDilemma) { setDilemma(foundDilemma) // Check if user has already responded to this dilemma const existingResponse = userResponses.find((r) => r.dilemmaId === params.id) if (existingResponse) { setPreviousResponse(existingResponse.choice) setSelectedChoice(existingResponse.choice) setIsCollapsed(true) setShowConsequences(true) } } else { router.push("/dilemmas") } }, [params.id, dilemmas, userResponses, router]) if (!dilemma) { return (

) } const handleChoiceSelect = (choice: ChoiceType) => { if (!isCollapsed) { setSelectedChoice(choice) } } const handleCollapseWavefunction = () => { if (selectedChoice && !isCollapsed) { setIsCollapsed(true) // Only add a new response if there isn't a previous one if (!previousResponse) { addResponse({ dilemmaId: dilemma.id, choice: selectedChoice, timestamp: Date.now(), }) } // Show consequences after a short delay setTimeout(() => { setShowConsequences(true) }, 1000) } } return (

{dilemma.title} {dilemma.description}

{dilemma.context}

{!isCollapsed && (

Quantum Superposition of Choices

)} {isCollapsed && showConsequences && selectedChoice && (

Consequences

{selectedChoice.consequences}

)}

{dilemma.choices.map((choice) => { const isSelected = selectedChoice?.id === choice.id const probability = getPrediction(dilemma.id, choice.id) return (

handleChoiceSelect(choice)} className={` p-4 rounded-lg border transition-all duration-300 cursor-pointer ${ isSelected ? "border-purple-500 bg-purple-900/30" : "border-blue-500/30 bg-blue-900/10 hover:bg-blue-900/20" } `} >

{choice.text}

{!isCollapsed && (

{Math.round(probability * 100)}%

)}

{choice.description}

) })}

{!isCollapsed ? ( ) : ( )} {!isCollapsed && (

Quantum Tunneling Prediction

)}

) } [V0_FILE]typescriptreact:file="components/superposition-visualizer.tsx" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import type { ChoiceType } from "@/lib/types" interface SuperpositionVisualizerProps { choices: ChoiceType[] selectedChoice: ChoiceType | null } export function SuperpositionVisualizer({ choices, selectedChoice }: SuperpositionVisualizerProps) { const canvasRef = useRef(null) const [dimensions, setDimensions] = useState({ width: 0, height: 0 }) useEffect(() => { const handleResize = () => { if (canvasRef.current) { const canvas = canvasRef.current const container = canvas.parentElement if (container) { const { width } = container.getBoundingClientRect() setDimensions({ width, height: 300 }) canvas.width = width canvas.height = 300 } } } handleResize() window.addEventListener("resize", handleResize) return () => window.removeEventListener("resize", handleResize) }, []) useEffect(() => { if (!canvasRef.current || dimensions.width === 0) return const canvas = canvasRef.current const ctx = canvas.getContext("2d") if (!ctx) return // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height) // Set up animation const particles: Array<{ x: number y: number size: number speedX: number speedY: number color: string opacity: number choiceIndex: number }> = [] // Create particles for each choice const colors = [ "rgba(59, 130, 246, 0.7)", "rgba(139, 92, 246, 0.7)", "rgba(236, 72, 153, 0.7)", "rgba(16, 185, 129, 0.7)", ] for (let i = 0; i < 200; i++) { const choiceIndex = i % choices.length const isSelected = selectedChoice && choices[choiceIndex].id === selectedChoice.id particles.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, size: Math.random() * 4 + (isSelected ? 2 : 1), speedX: (Math.random() - 0.5) * 2, speedY: (Math.random() - 0.5) * 2, color: colors[choiceIndex % colors.length], opacity: isSelected ? 0.9 : 0.5, choiceIndex, }) } // Animation function const animate = () => { ctx.clearRect(0, 0, canvas.width, canvas.height) // Draw background ctx.fillStyle = "rgba(15, 23, 42, 0.3)" ctx.fillRect(0, 0, canvas.width, canvas.height) // Draw particles particles.forEach((particle) => { const isSelected = selectedChoice && choices[particle.choiceIndex].id === selectedChoice.id ctx.beginPath() ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2) ctx.fillStyle = particle.color.replace("0.7", particle.opacity.toString()) ctx.fill() // Update position particle.x += particle.speedX * (isSelected ? 1.5 : 1) particle.y += particle.speedY * (isSelected ? 1.5 : 1) // Bounce off edges if (particle.x < 0 || particle.x > canvas.width) particle.speedX *= -1 if (particle.y < 0 || particle.y > canvas.height) particle.speedY *= -1 // Gradually increase opacity for selected choice if (isSelected && particle.opacity < 0.9) { particle.opacity += 0.01 particle.size = Math.min(particle.size + 0.02, 6) } else if (!isSelected && particle.opacity > 0.3) { particle.opacity -= 0.01 particle.size = Math.max(particle.size - 0.01, 1) } }) // Draw choice labels ctx.textAlign = "center" ctx.font = "14px sans-serif" choices.forEach((choice, index) => { const x = (canvas.width / (choices.length + 1)) * (index + 1) const y = canvas.height - 20 const isSelected = selectedChoice && choice.id === selectedChoice.id ctx.fillStyle = isSelected ? colors[index % colors.length] : "rgba(255, 255, 255, 0.7)" ctx.fillText(choice.text, x, y) }) requestAnimationFrame(animate) } const animationId = requestAnimationFrame(animate) return () => cancelAnimationFrame(animationId) }, [choices, selectedChoice, dimensions]) return (

) } [V0_FILE]typescriptreact:file="components/prediction-tunnel.tsx" isMerged="true" "use client" import { useRef, useEffect } from "react" import { useQuantumEthics } from "@/components/providers" import type { ChoiceType } from "@/lib/types" import { Button } from "@/components/ui/button" import { ThumbsUp, ThumbsDown } from "lucide-react" interface PredictionTunnelProps { dilemmaId: string choices: ChoiceType[] } export function PredictionTunnel({ dilemmaId, choices }: PredictionTunnelProps) { const { getPrediction, updatePredictionAccuracy } = useQuantumEthics() const canvasRef = useRef(null) useEffect(() => { if (!canvasRef.current) return const canvas = canvasRef.current const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas dimensions const container = canvas.parentElement if (container) { canvas.width = container.clientWidth canvas.height = 200 } // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height) // Draw tunnel const centerY = canvas.height / 2 const tunnelWidth = canvas.width * 0.8 const startX = (canvas.width - tunnelWidth) / 2 // Draw tunnel background const gradient = ctx.createLinearGradient(startX, 0, startX + tunnelWidth, 0) gradient.addColorStop(0, "rgba(30, 64, 175, 0.2)") gradient.addColorStop(1, "rgba(30, 64, 175, 0.05)") ctx.fillStyle = gradient ctx.beginPath() ctx.moveTo(startX, centerY - 60) ctx.lineTo(startX + tunnelWidth, centerY - 30) ctx.lineTo(startX + tunnelWidth, centerY + 30) ctx.lineTo(startX, centerY + 60) ctx.closePath() ctx.fill() // Draw probability paths for each choice const pathHeight = 120 const pathSpacing = pathHeight / choices.length choices.forEach((choice, index) => { const probability = getPrediction(dilemmaId, choice.id) const pathY = centerY - pathHeight / 2 + pathSpacing * (index + 0.5) // Draw path ctx.beginPath() ctx.moveTo(startX, pathY) // Create a curve based on probability const controlPoint1X = startX + tunnelWidth * 0.3 const controlPoint1Y = pathY const controlPoint2X = startX + tunnelWidth * 0.7 const controlPoint2Y = centerY - (centerY - pathY) * (1 - probability * 1.5) const endX = startX + tunnelWidth const endY = centerY ctx.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, endX, endY) // Style based on probability const alpha = 0.3 + probability * 0.7 const width = 1 + probability * 3 ctx.strokeStyle = `rgba(139, 92, 246, ${alpha})` ctx.lineWidth = width ctx.stroke() // Draw choice label ctx.fillStyle = `rgba(255, 255, 255, ${alpha})` ctx.font = "12px sans-serif" ctx.textAlign = "left" ctx.fillText(choice.text, startX + 10, pathY + 4) // Draw probability percentage ctx.textAlign = "right" ctx.fillText(`${Math.round(probability * 100)}%`, startX + tunnelWidth - 10, pathY + 4) // Draw particles along the path const particleCount = Math.floor(10 * probability) + 3 for (let i = 0; i < particleCount; i++) { const t = i / particleCount const x = startX + t * tunnelWidth // Calculate y position along the Bezier curve const t1 = 1 - t const y = t1 * t1 * t1 * pathY + 3 * t1 * t1 * t * controlPoint1Y + 3 * t1 * t * t * controlPoint2Y + t * t * t * endY ctx.beginPath() ctx.arc(x, y, 2 + probability * 3, 0, Math.PI * 2) ctx.fillStyle = `rgba(139, 92, 246, ${alpha})` ctx.fill() } }) // Draw destination point ctx.beginPath() ctx.arc(startX + tunnelWidth, centerY, 8, 0, Math.PI * 2) ctx.fillStyle = "rgba(139, 92, 246, 0.8)" ctx.fill() ctx.strokeStyle = "rgba(255, 255, 255, 0.8)" ctx.lineWidth = 2 ctx.stroke() }, [dilemmaId, choices, getPrediction]) return (

Based on your previous choices, the system predicts your likely decisions.

) } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/insights/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { useQuantumEthics } from "@/components/providers" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from "recharts" export default function InsightsPage() { const { userResponses, dilemmas } = useQuantumEthics() const [categoryData, setCategoryData] = useState>([]) const [timeData, setTimeData] = useState>([]) useEffect(() => { if (userResponses.length === 0) return // Process category data const categories: Record = {} userResponses.forEach((response) => { const category = response.choice.category categories[category] = (categories[category] || 0) + 1 }) const categoryDataArray = Object.entries(categories).map(([name, value]) => ({ name, value, })) setCategoryData(categoryDataArray) // Process time data const timeDataArray = userResponses.map((response) => { const dilemma = dilemmas.find((d) => d.id === response.dilemmaId) return { name: dilemma?.title || response.dilemmaId, timestamp: response.timestamp, } }) setTimeData(timeDataArray) }, [userResponses, dilemmas]) if (userResponses.length === 0) { return (

No Insights Available You haven't completed any ethical dilemmas yet.

Complete some dilemmas to see your quantum ethical profile.

) } const COLORS = ["#8b5cf6", "#3b82f6", "#ec4899", "#10b981"] return (

Quantum Ethical Insights

Analyzing the superposition of your ethical choices

Overview Categories Timeline

Ethical Framework Distribution Your decisions across different ethical frameworks `${name} (${(percent * 100).toFixed(0)}%)`} > {categoryData.map((entry, index) => ( ))} Your Ethical Profile Analysis of your decision-making patterns

{categoryData.length > 0 && ( <>

Primary Framework

{categoryData.sort((a, b) => b.value - a.value)[0].name}

Framework Interpretation

Your decisions show a tendency toward{" "} {categoryData.sort((a, b) => b.value - a.value)[0].name} reasoning, suggesting you value{" "} {getFrameworkDescription(categoryData.sort((a, b) => b.value - a.value)[0].name)}.

)}

Ethical Categories Breakdown Detailed view of your ethical decision categories

{categoryData.map((category, index) => ( {category.name}

{getFrameworkDescription(category.name)}

))}

Decision Timeline Chronological view of your ethical decisions

{userResponses.map((response, index) => { const dilemma = dilemmas.find((d) => d.id === response.dilemmaId) const date = new Date(response.timestamp) return (

{dilemma?.title}

{date.toLocaleDateString()} at {date.toLocaleTimeString()}

{response.choice.text}

) })}

) } function getFrameworkDescription(framework: string): string { const descriptions: Record = { utilitarian: "maximizing overall happiness or well-being across all affected individuals", deontological: "following moral rules and duties regardless of consequences", "virtue-ethics": "developing good character traits and acting as a virtuous person would", "care-ethics": "maintaining and nurturing relationships and caring for others", "rights-based": "respecting the fundamental rights and dignity of individuals", consequentialist: "judging actions based on their outcomes rather than intentions", "procedural-justice": "ensuring fair processes rather than specific outcomes", contractarian: "following principles that would be agreed upon in a fair social contract", balanced: "finding a middle ground between competing ethical principles", "self-interest": "prioritizing your own well-being and interests", libertarian: "maximizing individual freedom and minimizing restrictions", altruistic: "selflessly helping others even at personal cost", "fair-opportunity": "ensuring everyone has equal chances and opportunities", } return descriptions[framework] || "a balanced approach to ethical decision-making" } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" "use client" import * as React from "react" import type { ChartConfig } from "recharts/types/util/types" import { cn } from "@/lib/utils" interface ChartContextValue { config: ChartConfig className?: string } const ChartContext = React.createContext(null) function useChartContext() { const context = React.useContext(ChartContext) if (!context) { throw new Error("useChartContext must be used within a ChartProvider") } return context } const ChartContainer = React.forwardRef< HTMLDivElement, React.HTMLAttributes & { config: ChartConfig } >(({ className, children, config, ...props }, ref) => (

{children}

)) ChartContainer.displayName = "ChartContainer" const ChartTooltip = React.forwardRef< React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div"> & { cursor?: boolean content?: React.ReactNode } >(({ className, cursor = true, content, children, ...props }, ref) => (

{children}

)) ChartTooltip.displayName = "ChartTooltip" const ChartTooltipContent = React.forwardRef< React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div"> & { label?: string hideLabel?: boolean } >(({ className, label, hideLabel = false, children, ...props }, ref) => { const { config } = useChartContext() return (

{!hideLabel && label ?

{label}

: null}

{React.Children.map(children, (child) => { if (!React.isValidElement(child)) return child const name = child.props.dataKey const color = child.props.fill || child.props.stroke const configKey = Object.keys(config).find((key) => key === name || config[key].dataKey === name) if (!configKey) return child const { label } = config[configKey] return (

{label}

{typeof child.props.value === "number" ? child.props.value.toLocaleString() : child.props.value}

) })}

) }) ChartTooltipContent.displayName = "ChartTooltipContent" const ChartLegend = React.forwardRef, React.ComponentPropsWithoutRef<"ul">>( ({ className, ...props }, ref) => (

{label}

About

Tags

Share

About

Tags

Share

More from bathsalt-2

More Templates Like This

About

Tags

Share

About

Tags

Share

More from bathsalt-2

More Templates Like This